<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <head>
      <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
         <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
         <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
     <% } %>
     <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
     <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
         <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" ></script>
     <% } %>
    <script src="./serverConfig.js"></script>
    <script>
      if(!(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent))) {
          window.location.href = urlList.PcUel;
      }
    </script>
    <script>
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                // console.log(clientWidth)
                if (clientWidth < 750) {
                    clientWidth
                } else {
                    clientWidth = 750
                }
                if (!clientWidth) return;
                docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window)
    window.onorientationchange=function(){
        if(window.orientation==90||window.orientation==-90){
            document.getElementsByClassName('orientation')[0].classList.add('on')
            document.getElementById("app").classList.add('on')
          }else{
            document.getElementsByClassName('orientation')[0].classList.remove('on')
            document.getElementById("app").classList.remove('on')
            // alert('没有横屏');
        }
    }
    setInterval(function(){
      var html_lang = localStorage.getItem("langsuff");
      if(html_lang == 'en'){
        document.getElementById('tips_body').innerText = 'Please open an account when the vertical screen is locked!'
      }else if(html_lang == 'tc'){
        document.getElementById('tips_body').innerText = '請在鎖定豎屏狀態下，進行開戶！'
      }else{
        document.getElementById('tips_body').innerText = '请在锁定竖屏状态下，进行开户！'
      }
    },1000)
    
    </script>
        <style>
            /*竖屏...*/
            .orientation{
              display: none;
            }
            /*横屏...*/
            .orientation.on{
              display: block;
              width: 100vw;
              height:100vh;
              overflow: hidden;
              position: relative;
            }
            .orientation.on div{
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height:100%;
            }
            .orientation.on p{
              background: #fff url(./landscape.png) no-repeat center top;
              padding-top: 60px;
              background-size: 50px;
              width: 80%;
              text-align: center;
              font-size: 14px;
              line-height: 20px;
            }
            #app.on{
              display: none;
            }
        </style>
         
     </head>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div class="orientation">
      <div>
        <p id="tips_body"></p>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
